// Make all css changes here. These change will get added into the current SCSS structure where applicable.

$screen-lg-min: 1200px;
$screen-md-min: 992px;
$screen-sm-min: 768px;
$screen-xs-min: 480px;

/* Add space between definitions. */
dd {
	margin-bottom: 15px;
}

/* Make code font more noticeable (without being obnoxious). */
code {
	color: #008f83
}

/* Make code-font links look like links. Should also change the hover color. */
a code {
    color: $default-link
}

/* Make links in page footer white, not blue. */
#page-footer h4 a {
	color: #fff;
}

// SIDE NAV

.sidenav__search {
	margin-bottom: 20px;
	display: block;

	@media (min-width: $screen-xs-min) {
		display: none;
	}
}

// FRONT-PAGE RELATED

@mixin front-page-first-section-height {
	height: 230px;
	@media (min-width: $screen-sm-min) {
		height: 350px;
	}
	@media (min-width: $screen-lg-min) {
		height: 300px;
	}
}

@mixin front-page-first-section-min-height {
	min-height: 230px;
	@media (min-width: $screen-sm-min) {
		min-height: 350px;
	}
	@media (min-width: $screen-lg-min) {
		min-height: 300px;
	}
}

@mixin popover-open {
  &.popover-open {
    font-weight: 500;
    border-color: $default-link;
  }
}

[data-toggle="popover"] {
	background: none;
	border-bottom: 2px dotted $gray;
	padding: 0;
  cursor: pointer;
  @include popover-open;
}

@media (hover: hover) {
  [data-toggle="popover"]:hover { border-color: $default-link !important; }
}

body.homepage #code-sample {
  [data-toggle="popover"] {
    border-color: darken($gray, 10%);
    @include popover-open;
  }
  .popover-content {
    color: $gray-base;
    code { color: $blue; }
  }
}

body.homepage {
	#code-sample-section {
		pre {
			font-size: $font-size-base * 0.8;
			@media (min-width: $screen-sm-min) {
				font-size: $font-size-base * 0.7;
			}
			@media (min-width: $screen-md-min) {
				font-size: $font-size-base * 0.8;
			}
			@include front-page-first-section-height;
			overflow: auto;
			&.prettyprint a {
				background: transparent;
				padding: 0;
			}
		}
	}
}

/* Slogan */
.frontpage-slogan-with-footnotes {
	@include front-page-first-section-min-height;
	position: relative;
}

.frontpage-slogan {
	h3 {
		text-align: left;
		background: none;
		font-size: $font-size-h4;

		@media (min-width: $screen-sm-min) {
			font-size: $font-size-h4 * 0.9;
		}

		@media (min-width: $screen-lg-min) {
			font-size: $font-size-h3;
		}

		font-weight: 300;
		line-height: 150%;
		margin-bottom: 1em;
	}

	[data-toggle="popover"] {
		padding: 0 2px;
	}
}

.frontpage-slogan__get-started {
	border: none;
	background-color: $gray-light;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
	margin-right: 1em;

	&:hover {
		background-color: lighten($gray-light, 2%);
	}
}

/* Create craigslist-like small cards for the front page */
body.homepage .chip-grid-section {
	padding-top: 0;
	padding-bottom: 0;
}

.chip-grid-section__header {
	width: 50px;
	float: left;
	h3 {
		transform: rotate(-90deg);
		transform-origin: center bottom;
		width: 100px;
		float: left;
		font-size: $font-size-base;
	}

}

.chip-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 0;
}
.chip {
	display: block;
	position: relative;
	width: 150px;
	height: auto;
	padding: 10px;
	overflow: hidden;
	margin-right: 20px;
	margin-bottom: 20px;
	box-sizing: border-box;
	background-color: $gray-light;
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
	h1, h2, h3, h4, h5, h6 {
		margin-top: 0;
		color: $default-link;
		margin-bottom: $font-size-base / 2;
		font-size: $font-size-base;
	}
	p {
		color: $gray-base;
		font-size: $font-size-base * 0.8;
		margin-bottom: 0;
	}
}

.chip:hover {
	background-color: lighten($gray-light, 2%);
}

.btn-primary, .btn-primary:visited {
	color: white;
}

/* Get started section in the bottom */
body.homepage .get-started-section {
	padding-top: 0;
	padding-bottom: 90px;
}

// Core goals

.core-goals__first {
	margin-top: 0;
	@media (min-width: $screen-sm-min) {
		margin-top: 40px + 25px;  // Core values headline height + bottom margin
	}
}

/* Get started page */

.image-aside {
	float: right;
	max-width: 50%;
	margin-left: 5%;
}

.get-started-table {
	margin-top: 20px;
	margin-bottom: 20px;

	td {
		padding: 10px;
		padding-left: 0;
		padding-right: 2em;
		border-bottom: 1px solid $gray-light;
	}

	td:first-child {
		@media (min-width: $screen-xs-min) {
		  padding-right: 0;
		}
	}

  /* icon column */
	td:nth-child(2) {
		width: 4em;
		display: none;
		text-align: center;

		@media (min-width: $screen-xs-min) {
			display: table-cell;
		}
	}

	td:last-child {
		padding-left: 10px;
		a {
			width: 100%;
		}
	}
}

.get-started-table__text {
	@media (min-width: $screen-sm-min) {
		float: left;
		width: 35%;
	}
}

/* Who Uses Dart page */

.who-uses-list {
	margin-top: 50px;
	column-count: 1;
	column-rule: 1px solid $gray-light;
	column-gap: 40px;

	@media (min-width: $screen-md-min) {
		column-count: 2;
	}
	@media (min-width: $screen-lg-min) {
		column-count: 3;
	}
}

/* Effective Dart TOC */

.effective_dart--summary_column {
	@media (min-width: $screen-sm-min) {
		width: 50%;
		float: left;
		padding-right: 5%;
	}
}

@media print {
	/* Don't display navigation aids when printing */
	#page-header, #sidenav, #subnav, #page-footer, .banner, #toc {
		display:none !important;
	}

	#page-content {
		> article {
			width: auto;
			margin: 0;
		}
	}

	/* Display underlines under links */
	a {
		text-decoration: underline;
	}

	/* Remove external link icon and link path */
	a:after {
		content: none !important;
	}

	/* Show borders around notes and code blocks */
	.alert, pre {
		border: 1px solid black;
	}

	/* Hide "Open Dartpad" link */
	.run-in-dartpad {
		display: none;
	}
}

/* Overwrite bootstrap: don't wrap code */
pre code {
  white-space: pre;
}
